<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>验证码</title>
    <script src="js/ajax.js"></script>
</head>
<body>
<fieldset>
    <legend>用户登录</legend>
    <form action="" id="app">
        <div>
            <label>账号：</label><input name="name" placeholder="请输入账号"/><span id="nameMsg"></span><br>
            <label>密码：</label><input name="pwd" placeholder="请输入密码" type="password"/><span id="pwdMsg"></span><br>
            <label>验证码：</label><img src="VcodeServlet">
                         <input name="vcode" placeholder="请输入验证码" maxlength="4"/><span id="vcodeMsg"></span><br>
            <div style="width: 300px;text-align: right">
                <button type="button" onclick="login()">登录</button>
            </div>
        </div>
        <script>
            function login(){
                var inputs = document.getElementsByTagName('input');
                var name = inputs[0].value;
                var pwd = inputs[1].value;
                var vcode = inputs[2].value;
                // `` 反引号 ESC 下面那个键 1. 可以换行 2.可以使用表达式拼接
                var data = `name=${name}&pwd=${pwd}&vcode=${vcode}`;
                get("LoginsServlet?"+data, function (res){
                    alert(res.msg);
                    // 如果 data 有值 说明登陆前有访问的页面 那么跳转过去
                    if (res.data){
                        location.href = res.data;
                    }
                })
            }
        </script>
        <hr>
        <dl>
            <dt>附件</dt>
            <ul>
                <li><a href="https://zhuanlan.zhihu.com/p/160950249">验证码有什么用？</a></li>
                <li><a href="VerifyCodeUtils.java" download="VerifyCodeUtils.java">验证码生成工具</a></li>
                <li><a href="http://47.106.66.89:8080/easy/tbl_user/down">BBS用户表SQL</a></li>
            </ul>
        </dl>
    </form>
</fieldset>

</body>
</html>


<style>
    * {
        vertical-align: middle;
        text-decoration: none;
    }

    fieldset {
        width: 50%;
        margin: 40px auto;
    }

    div {
        line-height: 50px;
    }

    span {
        display: inline-block;
        width: 200px;
        line-height: 30px;
        vertical-align: middle;
        color: red
    }

    input, span, select {
        width: 200px;
        height: 30px;
        text-align: center;
        box-sizing: border-box;
    }

    label {
        min-width: 100px;
        display: inline-block;
        text-align: right;
        padding: 0px 5px;
        box-sizing: border-box;
    }

    img{
        height: 30px;
    }

    input[name=vcode]{
        width: 136px;
    }

    legend{
        background-color: #ddd;
        padding: 5px 10px;
        border-radius: 5px;
        font-weight: bold;
        color: #555;
    }

</style>